<template>
	<div>
		<van-pull-refresh v-model="refreshing" @refresh="flashOffer" style="height: calc(100vh - 140px);overflow: scroll;">
			<van-list v-model:loading="loadingNewOffer" :finished="noMoreOffer" finished-text="没有更多了"
				@load="loadNewOffer">
				<van-cell v-for="(offer, key) in offerList" :key="key">
					<OfferCell :data="offer" :accept="acceptOfferButtonHandler"  :openUserPage="openOfferUserPage"></OfferCell>
				</van-cell>
			</van-list>
		</van-pull-refresh>
	</div>
	
</template>

<script>
	// import {
	// 	ref
	// } from 'vue';
	import {
		showNotify,
		showConfirmDialog
	} from 'vant';
	import url from '@/assets/url.json';
	import OfferCell from '@/components/units/OfferCell.vue';
	

	export default {
		components: {
			OfferCell,
			
		},

		props: {
			offerType: String,
			openOfferUserPage: Function
		},

		mounted() {
			
		},

		methods: {
			
			flashOffer() {
				this.noMoreOffer = false;
				this.offerList = [];
				this.page = 0;
				this.loadNewOffer();
			},
			loadNewOffer() {
				this.page += 1;
				this.pushOffer();
			},


			pushOffer() {
				this.$axios({
					url: url.ip + '/api-offer' + '/offer/offer_list/' + this.offerType,
					method: 'GET',
					params: {
						page: this.page,
						limit: this.limit,
					},
					headers: {
						token: this.$cookies.get('token'),
					}
				}).then((res) => {
					if (res.data.code !== 0) {
						this.noMoreOffer = true;
						showNotify({
							type: 'danger',
							message: res.data.message
						});
					} else {
						if (res.data.data.length <= 0) {
							this.noMoreOffer = true;
						} else {
							for (let key in res.data.data) {
								this.offerList.push(res.data.data[key]);
							}
						}
					}
					this.loadingNewOffer = false;
					this.refreshing = false;
				}).catch(() => {
					this.loadingNewOffer = false;
					this.refreshing = false;
					this.noMoreOffer = true;
					showNotify({
						type: 'danger',
						message: "网络错误或未登录"
					});
				})
			},

			acceptOfferButtonHandler(data) {
				showConfirmDialog({
						title: '是否帮助此同学?',
						message: 'ta的需求:'+data.title,
					})
					.then(() => {
						// on confirm
						this.$axios({
							url:url.ip+'/api-offer'+'/offer/accept/'+data.id,
							method:'GET',
							headers: {
								token: this.$cookies.get('token'),
							}
						}).then((res)=>{
							if (res.data.code !== 0) {
								console.log(res);
								showNotify({
									type: 'danger',
									message: res.data.message
								});
							} else {
								showNotify({
									type: 'success',
									message: "已同意帮忙"
								});
							}
						}).catch((err)=>{
							console.log(err);
						})
					})
					.catch(() => {
						showNotify({
							type: 'warning',
							message: "已取消帮忙"
						});
					});
			},
		},
		data() {
			return {
				offerList: [],
				refreshing: false,
				loadingNewOffer: false,
				noMoreOffer: false,
				page: 0,
				limit: 5,

			}
		}

	}
</script>

<style>
</style>